<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="formModel">
        <el-form-item class="no-warn-item" label="工厂:" prop="plantNo">
          <el-select v-model="formModel.plantNo" clearable filterable>
            <el-option v-for="item in plantOptions" :key="item.tmBasPlantId" :label="item.plantNo + '-' + item.plantNameC" :value="item.plantNo"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="no-warn-item" label="车辆VIN号:" prop="routeName">
          <el-input
            v-model="formModel.vin"
            class="filter-item "
            clearable
          />
        </el-form-item>
        <el-row class="submit-area">
          <el-col :span="24">
            <el-button type="primary" v-if="hasPermission('on_line_product_car_select')" plain @click="queryList">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <h3>在线生产车辆列表:</h3>
    <hey-table ref="table" :table-data="tableData" :columns="columns">
      <template slot="tools">
        <el-table-column
          label="操作"
          width="80"
          fixed="right"
          header-align="center"
          align="center"
        >
          <template slot-scope="{row}">
            <span class="hey_tools_btn" v-if="hasPermission('vehicle_hold_confirm')" @click="handleHold(row)">冻结</span>
          </template>
        </el-table-column>
      </template>
    </hey-table>
    <div class="filter-container">
      <el-form :inline="true" :model="formModel1">
        <el-form-item class="no-warn-item" label="工厂:" prop="plantNo">
          <el-select v-model="formModel1.plantNo" clearable filterable>
            <el-option v-for="item in plantOptions" :key="item.tmBasPlantId" :label="item.plantNo + '-' + item.plantNameC" :value="item.plantNo"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="no-warn-item" label="车辆VIN号:" prop="routeName">
          <el-input
            v-model="formModel1.vin"
            class="filter-item "
            clearable
          />
        </el-form-item>
        <el-row class="submit-area">
          <el-col :span="24">
            <el-button type="primary" v-if="hasPermission('vehicle_hold_select')" plain @click="queryList1">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <h3>已冻结车辆列表:</h3>
    <hey-table ref="table1" :table-data="tableData1"  :columns="columns1">
      <template slot="tools">
        <el-table-column
          label="操作"
          width="80"
          fixed="right"
          header-align="center"
          align="center"
        >
          <template slot-scope="{row}">
            <span class="hey_tools_btn" v-if="hasPermission('vehicle_hold_remove_hold')" @click="handleRemoveHold(row)">解冻</span>
          </template>
        </el-table-column>
      </template>
    </hey-table>

    <el-dialog
      v-dialogDrag
      v-if="dialogVisible"
      :close-on-click-modal="false"
      title="车辆冻结"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <vehicle-hold-mnt :page-type="operType" :edit-data="editData" @mntSuc="queryListAll" />
    </el-dialog>
  </div>
</template>

<script>

  export default {
    name: 'VehicleHoldList',
    components: {
      VehicleHoldMnt: () => import('./vehicle-hold-mnt'),
    },
    props: {},
    data() {
      return {
        dialogVisible: false,
        operType: '',
        editData: {},
        tableData:[],
        tableData1:[],
        plantOptions:[],
        formModel: {
          plantNo: '',
          vin: '',
          carStatus: '1',
          isDelete: '0'
        },
        formModel1: {
          plantNo: '',
          vin: '',
          isDelete: '0'
        },
        columns: [
          { title: '车辆VIN号', key: 'vin'},
          { title: '工厂代码', key: 'plantNo'},
          { title: '工厂名称', key: 'plantNameC'},
          { title: '工艺路线代码', key: 'routeNo'},
          { title: '工艺路线名称', key: 'routeName'},
          { title: '当前工位代码', key: 'ulocNo'},
          { title: '当前工位名称', key: 'ulocName'},
          { title: '整车物料号', key: 'materialNo'},
          { title: '物料描述', key: 'materialDesc'},
          { title: '车辆状态', key: 'carStatus',clcd:'car_status_cd' },
        ],
        columns1: [
          { title: '车辆VIN号', key: 'vin'},
          { title: '工厂代码', key: 'plantNo'},
          { title: '工厂名称', key: 'plantNameC'},
          { title: '工艺路线代码', key: 'routeNo'},
          { title: '工艺路线名称', key: 'routeName'},
          { title: '当前工位代码', key: 'ulocNo'},
          { title: '当前工位名称', key: 'ulocName'},
          { title: '整车物料号', key: 'materialNo'},
          { title: '物料描述', key: 'materialDesc'},
          { title: '车辆状态', key: 'carStatus',clcd:'car_status_cd' },
          { title: '冻结理由', key: 'holdReasonDesc' },
          { title: '冻结时间', key: 'holdTime' },
          { title: '冻结用户', key: 'holeUsername' },
        ]
      }
    },
    computed: {

    },
    mounted() {
      this.getPlants()
    },
    methods: {
      getPlants(){
        const param = {pageNum:1,pageSize:9999}
        param.isDelete = '0'
        param.status = '1'
        this.get('/tmBasPlant/queryTmBasPlant', param).then(res => {
          this.plantOptions = res.list
        })
      },
      queryListAll(){
        this.queryList()
        this.queryList1()
      },
      queryList() {
        this.$refs.table.query('/vehicleHoldInfo/queryTmCarVehicle', this.formModel, '', false)
      },
      queryList1() {
        this.$refs.table1.query('/vehicleHoldInfo/queryVehicleHoldInfo',this.formModel1 , '', false)
      },
      handleHold(row) {
        this.dialogVisible = true
        this.operType = 'edit'
        this.editData = row || {}
      },
      handleRemoveHold(row) {
        this.$sure('确认解冻？', _ => {
          this.post('/vehicleHoldInfo/removeHoldVehicle', { rcrdId: row.rcrdId,vin:row.vin}).then(_ => {
            this.$info('车辆解冻成功', this.queryListAll)
          })
        })
      },
    }
  }
</script>


